<template>
  <div class="loginPage">
    <div class="shadow">
      <video class="vid" src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
          <el-card class="loginBox">
          <div class="title-container">
            <img src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png">
          </div>
            <el-form :mode="loginForm" :rules="rules" ref="loginRef">
              <el-form-item v-if="false">
                <el-input prefix-icon="el-icon-s-opportunity" placeholder="企业" v-model="loginForm.tenant"></el-input>
              </el-form-item>
              <el-form-item prop="account">
                <el-input prefix-icon="el-icon-s-custom" placeholder="账号"  v-model="loginForm.account"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input prefix-icon="el-icon-unlock" show-password placeholder="密码"  v-model="loginForm.password"></el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input prefix-icon="el-icon-s-claim" placeholder="验证码" v-model="loginForm.code" >
                  <template #suffix>
                    <img class="code-image" :src="yzmSrc" @click="changeCode">
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="login-button" @click="sumit">登录</el-button>
              </el-form-item>
            </el-form>
          </el-card>
    </div>
  </div>
</template>

<script>

import { getCode, login } from '@/api/user'

export default {
  name: 'loginPage',
  data () {
    return {
      loginForm: {
        tenant: '0000',
        account: 'shenlingadmin',
        password: '123456',
        key: '3D0F77099CF5D796224898581676594246597',
        code: ''
      },
      keys: {
        key: '3D0F77099CF5D796224898581676594246597',
        0: '3D0F77099CF5D796224898581676594246597'
      },
      rules: {
        account: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      },
      yzmSrc: ''
    }
  },
  created () {
    this.getLoginKey()
  },
  methods: {
    async getLoginKey () {
      const res = await getCode(this.keys)
      // console.log(res)
      this.yzmSrc = URL.createObjectURL(res)
    },
    changeCode () {
      this.getLoginKey()
    },
    async sumit () {
      this.$refs.loginRef.validate()
      const res = await login(this.loginForm)
      console.log(res)
      if (res.code === 200) {
        this.$store.commit('user/setToken', res.data.token.token)
        this.$store.commit('user/setTimeOut', res.data.token.expire)
        this.$store.commit('user/setUserInfo', res.data.user)
        this.$router.push('/')
      } else {
        this.$message.error(res.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
 .loginPage{
   background-size: 100% 100%;
   height: 100vh;
   overflow-y: hidden;
   position: relative;
   .shadow{
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0.9;
     background: #1a1c41;
     .vid{
       display: inline-block;
       height: 100%;
       width: 100%;
       object-fit: fill;
       }
     .loginBox{
       position: absolute;
       top: 45%;
       left: 45%;
       margin: -180px 0 0 -160px;
       width: 360px;
       height: 367px;
       padding: 36px 40px;
       background: #fff;
       border-radius: 10px;
       .title-container{
         position: relative;
         margin-bottom: 28px;
         text-align: center;
         img{
           height: 54px;
         }
       }
       .login-button {
         width: 100%;
         height: 54px;
         margin-bottom: 14px;
         margin-top: 22px;
         background-color: #e15536;
         border: 0;
         font-size: 18px;
         color: #fff;
         font-weight: 700;
       }
       .code-image{
         display: inline-block;
         vertical-align: top;
         width: 71px;
         height: 32px;
         cursor: pointer;
         margin-left: 10px;
         position: absolute;
         right: 10px;
         top: 6px;
       }
     }
   }
 }
</style>
